<template>
  <div class="emp-entry-record-container">
    <div class="wx-apply-emp-box" ref="wrapper" v-if="showData == 1">

      <div class="wx-apply-emp-con-list">
        <div class="apply-line-box"></div>
        <div class="wx-apply-emp-list" v-for="(item,index) in entryRecordList" :key="index">
          <div class="wx-apply-emp-content">
            <div class="wx-apply-emp-con1">
              <span class="apply-company">{{item.mechanismName}}</span>
              <span class="apply-time">{{item.time | format}}</span>
            </div>
            <div class="wx-apply-emp-con2">
              <span class="entry-work-post">入职岗位：{{item.workTypeName}}</span>
              <span class="work-status status-mark1" v-if="item.status == 0 ">{{item.status | changeStatus}}</span>
              <span class="work-status status-mark3" v-else-if="item.status == 1 || item.status == 5">{{item.status | changeStatus}}</span>
              <span class="work-status status-mark2" v-else-if="item.status == 2 || item.status == 4 || item.status == 6">{{item.status | changeStatus}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关入职记录~</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import {formatDate, getDeviceRatio} from "../../../config/util";
  import BScroll from 'better-scroll';
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        userSign: "",
        currentPage: 1,
        PageSize: 20,
        entryRecordList: [],
        showData: 0,
        entryRecordScroll: null,
        noMoreData: false,
        userId: this.$route.query.userId
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.getEntryRecordList();
    },
    methods: {
      getEntryRecordList() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/invite/get_work_record_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/invite/get_work_record_list?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time + "&userId=" + this.userId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.showData = 1;
              this.entryRecordList = resultObj.data;

              this.$nextTick(() => {
                this.initScroll();
                this.entryRecordScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.entryRecordScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/invite/get_work_record_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/invite/get_work_record_list?sgin=" + this.userSign + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time + "&userId=" + this.userId).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.entryRecordList = this.entryRecordList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.entryRecordScroll) {
          this.entryRecordScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.entryRecordScroll.refresh();
        }
      },
      enable() {
        this.entryRecordScroll && this.entryRecordScroll.enable()
      },
      refresh() {
        this.entryRecordScroll && this.entryRecordScroll.refresh()
      },
      finishPullUp() {
        this.entryRecordScroll && this.entryRecordScroll.finishPullUp()
      },
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
      changeStatus(status) {
        if (status == 0) {
          return "面试预约中";
        } else if (status == 1) {
          return "面试通过";
        } else if (status == 2) {
          return "面试失败";
        } else if (status == 4) {
          return "放弃入职";
        } else if (status == 5) {
          return "入职成功";
        } else if (status == 6) {
          return "离职";
        }
      }
    },
    watch: {
      entryRecordList() {
        this.$nextTick(() => {
          this.entryRecordScroll.refresh();
        })
      }
    },
    components: {
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .emp-entry-record-container
    wh(100%, 100%)
    background: #f2f2f2
    .wx-apply-emp-box
      position: fixed
      top: 0
      bottom: 0
      width: 100%
      display: flex
      flex-direction: column
      .apply-line-box
        wh(100%, 0.267rem)
        background: #f2f2f2
      .wx-apply-emp-content
        wh(100%, 1.76rem)
        background: rgba(255, 255, 255, 1)
        border-bottom: 0.027rem solid #f2f2f2
        .wx-apply-emp-con1
          display: flex
          align-items: center
          margin-left: 3.2%
          wh(96.8%, 0.44rem)
          padding-top: 0.373rem
          padding-bottom: 0.267rem
          .apply-company
            width: 6.4rem
            ellipsis()
            size-color(0.427rem, #333333)
            padding-top: 0.05rem
            padding-bottom: 0.05rem
          .apply-time
            padding-top: 0.05rem
            padding-bottom: 0.05rem
            margin-left: auto
            margin-right: 0.32rem
            size-color(0.347rem, #999999)
        .wx-apply-emp-con2
          display: flex
          align-items: center
          margin-left: 3.2%
          width: 96.8%
          .entry-work-post
            size-color(0.373rem, #999)
          .work-status
            margin-left: auto
            margin-right: 0.32rem
            font-size: 0.373rem
          .status-mark1
            color: #FFAE3D
          .status-mark2
            color: #FF5353
          .status-mark3
            color: #3CAFFF
    .empty-wrap
      fj(center, center)
      wh(100%, 100%)
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
